JavaScripti dekoraatorid: metaandmete programmeerimine ja AOP-mustrid

JavaScripti dekoraatorid on võimas ja väljendusrikas metaprogrammeerimise funktsioon, mis võimaldab teil deklareerivalt ja taaskasutataval viisil muuta või täiustada klasside, meetodite, omaduste ja parameetrite käitumist. Need pakuvad lühikest süntaksit metaandmete lisamiseks ja aspektorienteeritud programmeerimise (AOP) põhimõtete rakendamiseks, parandades koodi taaskasutatavust, loetavust ja hooldatavust. See põhjalik juhend uurib üksikasjalikult JavaScripti dekoraatoreid, hõlmates nende süntaksit, kasutamist ja rakendusi erinevates stsenaariumides. Kuigi ametlikult on see veel arenev ettepanek, on dekoraatorid laialdaselt kasutusele võetud, eriti sellistes raamistikes nagu Angular ja NestJS, ning nende mõju JavaScripti arendusele on vaieldamatu.

Mis on JavaScripti dekoraatorid?

Dekoraatorid on spetsiaalne deklaratsioonitüüp, mida saab lisada klassi deklaratsioonile, meetodile, juurdepääsule, omadusele või parameetrile. Nad kasutavad @expression-i vormi, kus expression peab hindama funktsiooni, mida kutsutakse käitusajal koos teabega dekoreeritud deklaratsiooni kohta. Põhimõtteliselt toimivad dekoraatorid funktsioonidena, mis mähivad või muudavad dekoreeritud elementi, võimaldades teil lisada lisafunktsionaalsust või metaandmeid ilma algkoodi otse muutmata.

Mõelge dekoraatoritele kui märkustele või markeritele, mida saab lisada koodielementidele. Neid markereid saab seejärel käitusajal töödelda erinevate ülesannete täitmiseks, nagu logimine, valideerimine, autoriseerimine või sõltuvuse sisestamine. Dekoraatorid edendavad puhtamat ja modulaarsemat koodistruktuuri, eraldades muresid ja vähendades mallikoodi.

Dekoraatorite kasutamise eelised

• Parem koodi taaskasutatavus: Dekoraatorid võimaldavad teil kapseldada ühist käitumist taaskasutatavatesse komponentidesse, mida saab rakendada teie rakenduse mitmes osas. See vähendab koodi dubleerimist ja soodustab järjepidevust.
• Täiustatud loetavus: Eraldades läbivaid muresid dekoraatoritesse, saate oma põhilise loogika puhtamaks ja arusaadavamaks muuta. Dekoraatorid pakuvad deklaratiivset viisi lisakäitumise väljendamiseks, muutes koodi isedokumenteerivamaks.
• Suurem hooldatavus: Dekoraatorid edendavad modulaarsust ja murede eraldamist, muutes teie rakenduse muutmist või laiendamist lihtsamaks, mõjutamata koodibaasi teisi osi. See vähendab vigade tekkimise riski ja lihtsustab hooldusprotsessi.
• Aspektorienteeritud programmeerimine (AOP): Dekoraatorid võimaldavad teil rakendada AOP-põhimõtteid, võimaldades teil sisestada käitumist olemasolevasse koodi, muutmata selle lähtekoodi. See on eriti kasulik läbivate murede, näiteks logimise, turvalisuse ja tehingute haldamise käsitlemisel.

Dekoraatorite tüübid

JavaScripti dekoraatoreid saab rakendada erinevat tüüpi deklaratsioonidele, millest igaühel on oma konkreetne eesmärk ja süntaks:

Klassi dekoraatorid

Klassi dekoraatoreid rakendatakse klassi konstruktorile ja neid saab kasutada klassi definitsiooni muutmiseks või metaandmete lisamiseks. Klassi dekoraator saab argumendina klassi konstruktori.

Näide: Metaandmete lisamine klassile.

            
function Component(options: { selector: string, template: string }) {
  return function (constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: '
Hello
' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Output: my-component

            

              
                Copy
              
            
          

Selles näites lisab Component dekoraator klassile MyComponent omadused selector ja template, võimaldades teil konfigureerida komponendi metaandmeid deklaratiivsel viisil. See sarnaneb Angulari komponentide määratlemisega.

Meetodi dekoraatorid

Meetodi dekoraatoreid rakendatakse klassis olevatele meetoditele ja neid saab kasutada meetodi käitumise muutmiseks või metaandmete lisamiseks. Meetodi dekoraator saab kolm argumenti:

• Sihtobjekt (kas klassi prototüüp või klassi konstruktor, olenevalt sellest, kas meetod on staatiline).
• Meetodi nimi.
• Meetodi omaduse kirjeldaja.

Näide: Meetodikõnede logimine.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                     //         add returned: 5

            

              
                Copy
              
            
          

Selles näites logib Log dekoraator meetodikõne ja selle argumendid enne algse meetodi käivitamist ja logib tagastusväärtuse pärast täitmist. See on lihtne näide sellest, kuidas dekoraatoreid saab kasutada logimis- või auditeerimisfunktsionaalsuse rakendamiseks, muutmata meetodi põhilist loogikat.

Omaduse dekoraatorid

Omaduse dekoraatoreid rakendatakse klassis olevatele omadustele ja neid saab kasutada omaduse käitumise muutmiseks või metaandmete lisamiseks. Omaduse dekoraator saab kaks argumenti:

• Sihtobjekt (kas klassi prototüüp või klassi konstruktor, olenevalt sellest, kas omadus on staatiline).
• Omaduse nimi.

Näide: Omaduste väärtuste valideerimine.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Invalid value for ${propertyKey}. Must be a non-negative number.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Output: 10

try {
  product.price = -5; // Throws an error
} catch (e) {
  console.error(e.message);
}

            

              
                Copy
              
            
          

Selles näites valideerib Validate dekoraator omaduse price, et veenduda, et see on mittenegatiivne arv. Kui määratakse sobimatu väärtus, visatakse viga. See on lihtne näide sellest, kuidas dekoraatoreid saab kasutada andmete valideerimise rakendamiseks.

Parameetri dekoraatorid

Parameetri dekoraatoreid rakendatakse meetodi parameetritele ja neid saab kasutada metaandmete lisamiseks või parameetri käitumise muutmiseks. Parameetri dekoraator saab kolm argumenti:

• Sihtobjekt (kas klassi prototüüp või klassi konstruktor, olenevalt sellest, kas meetod on staatiline).
• Meetodi nimi.
• Parameetri indeks meetodi parameetrite loendis.

Näide: Sõltuvuste sisestamine.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hello, ${name}!`);
    }
}

// Lihtne sõltuvuse sisestamise konteiner
class Container {
    private dependencies: Map = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve(Greeter);
greeter.greet('World'); // Output: Logger: Hello, World!

            

              
                Copy
              
            
          

Selles näites kasutatakse Inject dekoraatorit sõltuvuste sisestamiseks klassi Greeter konstruktorisse. Dekoraator seob parameetriga märgi, mida saab seejärel kasutada sõltuvuse lahendamiseks sõltuvuse sisestamise konteineri abil. See näide näitab sõltuvuse sisestamise põhiteostust, kasutades dekoraatoreid ja teeki reflect-metadata.

Praktilised näited ja kasutusjuhtumid

JavaScripti dekoraatoreid saab kasutada mitmesugustes stsenaariumides koodi kvaliteedi parandamiseks ja arendamise lihtsustamiseks. Siin on mõned praktilised näited ja kasutusjuhtumid:

Logimine ja auditeerimine

Dekoraatoreid saab kasutada meetodikõnede, argumentide ja tagastusväärtuste automaatseks logimiseks, mis annab väärtuslikku teavet rakenduse käitumise ja jõudluse kohta. See võib olla eriti kasulik vigade silumiseks ja probleemide tõrkeotsinguks.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] Method ${propertyKey} returned: ${result}. Execution time: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simuleerige aeganõudvat toimingut
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

            

              
                Copy
              
            
          

See laiendatud näide mõõdab meetodi täitmisaega ja logib seda koos praeguse ajatempliga, pakkudes üksikasjalikumat teavet jõudluse analüüsiks.

Autoriseerimine ja autentimine

Dekoraatoreid saab kasutada turvapoliitika jõustamiseks, kontrollides kasutaja rolle ja õigusi enne meetodi käivitamist. See võib takistada volitamata juurdepääsu tundlikule teabele ja funktsionaalsusele.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Funktsioon praeguse kasutaja rolli hankimiseks

            if (userRole !== role) {
                throw new Error(`Unauthorized: User does not have the required role (${role}) to access this method.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // Reaalses rakenduses hangitaks see kasutaja roll autentimiskontekstist
    return 'admin'; // Näide: kõvakodeeritud roll demonstreerimiseks
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted successfully.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Article ${articleId} edited successfully.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // See tekitab vea, sest kasutaja roll on 'admin'
} catch (error) {
    console.error(error.message);
}

            

              
                Copy
              
            
          

Selles laiendatud näites kontrollib Authorize dekoraator, kas praegusel kasutajal on määratud roll, enne kui ta lubab meetodile juurdepääsu. getCurrentUserRole funktsiooni (mis hangiks reaalses rakenduses tegeliku kasutaja rolli) kasutatakse kasutaja praeguse rolli määramiseks. Kui kasutajal pole nõutavat rolli, visatakse viga, takistades meetodi käivitamist.

Vahemälu

Dekoraatoreid saab kasutada kulukate toimingute tulemuste vahemällu salvestamiseks, parandades rakenduse jõudlust ja vähendades serveri koormust. See võib olla eriti kasulik sageli kasutatavate andmete jaoks, mis ei muutu sageli.

            
function Cache(ttl: number = 60) { // ttl sekundites, vaikimisi 60 sekundit
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Retrieving from cache: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Executing and caching: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Arvuta aegumisaeg
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Vahemälu 120 sekundiks
    async fetchData(id: number): Promise {
        // Simuleerige andmete hankimist andmebaasist või API-st
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Data for ID ${id} fetched from source.`);
            }, 1000); // Simuleerige 1-sekundilist viivitust
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Käivitab meetodi
    console.log(await dataService.fetchData(1)); // Hankib vahemälust
    await new Promise(resolve => setTimeout(resolve, 121000)); // Oota 121 sekundit, et vahemälu aeguks
    console.log(await dataService.fetchData(1)); // Käivitab meetodi uuesti pärast vahemälu aegumist
})();

            

              
                Copy
              
            
          

See laiendatud näide rakendab lihtsa vahemälu mehhanismi, kasutades Map. Cache dekoraator salvestab dekoreeritud meetodi tulemused määratud aja (TTL). Kui meetodit kutsutakse uuesti samade argumentidega, tagastatakse vahemällu salvestatud tulemus, selle asemel et meetodit uuesti käivitada. Pärast TTL-i aegumist käivitatakse meetod uuesti ja tulemus salvestatakse vahemällu.

Valideerimine

Dekoraatoreid saab kasutada andmete valideerimiseks enne nende töötlemist, tagades andmete terviklikkuse ja ennetades vigu. See võib olla eriti kasulik kasutajate sisestuse või välisallikatest saadud andmete valideerimiseks.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Missing required field: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Valid user created:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Puuduv e-post
} catch (error) {
    console.error('Validation error:', error.message);
}


            

              
                Copy
              
            
          

See näide kasutab kahte dekoraatorit: Required ja ValidateClass. Dekoraator Required märgib omadused kohustuslikuks. Dekoraator ValidateClass peatab klassi konstruktori ja kontrollib, kas kõigil kohustuslikel väljadel on väärtused. Kui mõni kohustuslik väli puudub, visatakse viga.

Sõltuvuse sisestamine

Nagu on näidatud parameetri dekoraatori näites, võivad dekoraatorid hõlbustada sõltuvuse põhilist sisestamist, muutes sõltuvuste haldamise ja komponentide lahtisidumine lihtsamaks. Kuigi on olemas keerukamaid sõltuvuse sisestamise raamistikke, võivad dekoraatorid pakkuda kerget ja mugavat viisi lihtsate sõltuvuse sisestamise stsenaariumide käsitlemiseks.

Kaalutlused ja parimad tavad

• Mõistke täitmiskonteksti: Olge teadlik dekoraatori funktsioonile edastatud argumentidest target, propertyKey ja descriptor. Need argumendid annavad väärtuslikku teavet dekoreeritud deklaratsiooni kohta ja võimaldavad teil selle käitumist vastavalt muuta.
• Kasutage dekoraatoreid säästlikult: Kuigi dekoraatorid võivad olla võimsad, võib liigne kasutamine põhjustada keerulist ja raskesti mõistetavat koodi. Kasutage dekoraatoreid mõistlikult ja ainult siis, kui need annavad selge kasu koodi taaskasutatavuse, loetavuse või hooldatavuse osas.
• Järgige nimekonventsioone: Kasutage oma dekoraatorite jaoks kirjeldavaid nimesid, et selgelt näidata nende eesmärki. See muudab teie koodi isedokumenteerivamaks ja hõlpsamini mõistetavaks.
• Säilitage murede eraldamine: Dekoraatorid peaksid keskenduma konkreetsetele läbivatele muredele ja vältima omavahel mitteseotud funktsionaalsuse segamist. See parandab teie koodi modulaarsust ja hooldatavust.
• Testige oma dekoraatoreid põhjalikult: Nagu iga muu koodi puhul, tuleks dekoraatoreid põhjalikult testida, et veenduda nende õiges toimimises ja et nad ei põhjustaks soovimatuid kõrvalmõjusid.
• Olge ettevaatlik kõrvalmõjudega: Dekoraatorid käivituvad käitusajal. Vältige dekoraatorifunktsioonides keerukaid või kaua aega kestvaid toiminguid, kuna see võib mõjutada rakenduse jõudlust.
• TypeScript on soovitatav: Kuigi JavaScripti dekoraatoreid saab tehniliselt kasutada tavalises JavaScriptis koos Babeli transpileerimisega, kasutatakse neid kõige sagedamini TypeScriptiga. TypeScript pakub suurepärast tüübikindlust ja kujundusaja kontrolli dekoraatorite jaoks.

Ülemaailmsed perspektiivid ja näited

Koodi taaskasutatavuse, hooldatavuse ja murede eraldamise põhimõtted, mida dekoraatorid hõlbustavad, on universaalselt rakendatavad erinevates tarkvaraarenduse kontekstides kogu maailmas. Kuid konkreetsed rakendused ja kasutusjuhtumid võivad erineda sõltuvalt tehnoloogiapakis, projekti nõuetest ja arendustegevusest, mis on erinevates piirkondades levinud.

Näiteks ettevõtte Java arenduses kasutatakse konfiguratsiooni ja sõltuvuse sisestamiseks (nt Spring Framework) laialdaselt annotatsioone (sarnased mõistelt dekoraatoritega). Kuigi süntaks ja aluseks olevad mehhanismid erinevad JavaScripti dekoraatoritest, jäävad metaprogrammeerimise ja AOP põhimõtted samaks. Samamoodi on Pythonis dekoraatorid esmaklassiline keelefunktsioon ja neid kasutatakse sageli selliste ülesannete jaoks nagu logimine, autentimine ja vahemällu salvestamine.

Rahvusvahelistes meeskondades töötamisel või globaalse publikuga avatud lähtekoodiga projektides osalemisel on oluline järgida kodeerimisstandardeid ja parimaid tavasid, mis edendavad selgust ja hooldatavust. Dekoraatorite tõhus kasutamine võib aidata kaasa modulaarsemale ja hästi struktureeritud koodibaasile, muutes eri taustaga arendajate koostöö ja panuse lihtsamaks.

Järeldus

JavaScripti dekoraatorid on võimas ja mitmekülgne metaprogrammeerimise funktsioon, mis võib oluliselt parandada koodi taaskasutatavust, loetavust ja hooldatavust. Deklaratiivse viisi pakkumisega metaandmete lisamiseks ja AOP-põhimõtete rakendamiseks võimaldavad dekoraatorid teil kapseldada ühist käitumist, eraldada muresid ja luua modulaarsemaid ja hästi struktureeritud rakendusi. Kuigi see on veel aktiivselt arendatav ettepanek, on dekoraatorid juba leidnud laialdast kasutuselevõttu sellistes raamistikes nagu Angular ja NestJS ning nad on valmis muutuma üha olulisemaks osaks JavaScripti ökosüsteemist. Dekoraatorite süntaksi, kasutamise ja parimate tavade mõistmisega saate kasutada nende võimu tugevamate, skaleeritavamate ja hooldatavamate rakenduste loomiseks.

Kuna JavaScripti ökosüsteem areneb pidevalt, on uute funktsioonide ja parimate tavadega kursis püsimine ülioluline kvaliteetse tarkvara loomiseks, mis vastab kasutajate vajadustele kogu maailmas. JavaScripti dekoraatorite valdamine on väärtuslik oskus, mis aitab teil olla tõhusam ja produktiivsem arendaja.